<template>
  <div class="container">
    <div class="around">给周边司机发放优惠券</div>
    <div class="allWrap">
      <div>
        <div class="coupon">
          <coupon-template :info="coupon" class="coupon-template"></coupon-template>
        </div>
      </div>
      <div class="peoWrap">
        <div class="people">{{peopleNum}}人</div>
        <div class="week">周边司机总数</div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="handleCallBack">一键召唤</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import CouponTemplate from '../../components/coupon/template'
import { mapGetters } from 'vuex'
import { canCreateActive, predictUserNum, defaultCoupon, callAmbientDriver } from '@/api/marketShop'
export default {
  data () {
    return {
      coupon:{},
      peopleNum: ''
    }
  },
  components: {
    CouponTemplate
  },
  computed: {
    ...mapGetters(['gasInfo'])
  },
  mounted () {
    this.predictUserNumApi(this.gasInfo.gasId)
    this.defaultCouponApi()
  },
  methods: {
    async handleCallBack() {
      try {
        const gasId = this.gasInfo.gasId
        const { result } = await canCreateActive({ gasId, activeType: 1 })
        const { canCreate, message } = result
        if(!canCreate) {
           this.$message(({ title: '无法召唤', message: message, type: 'warning' }))
           return
        }
        this.$confirm(message, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true
        }).then(() => {
          this.callAmbientDriverApi(this.gasInfo.gasId)
        }).catch(() => {
          this.$message({ type: 'info', message: '已取消召唤' })        
        })
      } catch (e) {
        console.log(e)
      }
    },
     // 一键召唤周边司机
    async callAmbientDriverApi (gasId) {
      try {
        const res = await callAmbientDriver({ gasId })
        if (res.code !== 200) return
        // this.$router.push({ path: '/marketCenter/loadingAmbient' })
        this.$router.push({ path: '/marketCenter/activitySuccess',query:{isLoading: true} })
      } catch (e) {
        console.log(e)
      }
    },
    // 获取预计人数
    async predictUserNumApi (gasId) {
      try {
        const { code, result } = await predictUserNum({ gasId, activeType: 1 })
        if (code !== 200) return
        this.peopleNum = result
      } catch (e) {
        console.log(e)
      }
    },
    // 获取默认优惠券
    async defaultCouponApi () {
      try {
        const res = await defaultCoupon()
        const { couponConditionMoney, couponMoney, couponTitle, expireDateInterval } = res.result[1][0]
        this.coupon = { couponConditionMoney, couponMoney, couponTitle, expireDateInterval }
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style scoped lang="less">
.coupon-template{
  width: 310px;
  height: 121px;
}
.container{
  width:100%;
  margin-top: 10px;
  padding: 20px 30px 20px 30px;
  background: #fff;
}
.allWrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >div{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .peoWrap{
    align-items: center;
  }
  .btn{
    align-items: center;
  }
}
.around{
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
  margin-bottom: 20px;
}
.week{
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 22px;
}
.people{
  width: 200px;
  height: 72px;
  font-size: 36px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #4765F9;
  text-align: center;
  line-height: 72px;
}
.el-button{
  width: 180px;
}
</style>